<template>
  <view>
    <view class="con">
      <view class="navbarBox">
        <view class="l">
          <u-icon name="arrow-left" @click="goBack" color="#000" size="24" style="margin-right: 20rpx"></u-icon>
          <view class="nickName">
            <image class="head" src="" mode="aspectFill" />
            <view>用户昵称</view>
          </view>
        </view>
      </view>
      <up-tabs
        :list="list1"
        lineColor="#81D8D0"
        @click="tabClick"
        :activeStyle="{
          color: '#333',
          fontWeight: 'bold',
          transform: 'scale(1.05)',
        }"
      ></up-tabs>
    </view>

    <view class="box" v-if="tabActive === '动态'">
      <view class="item" v-for="(item, index) in 4" :key="index" @click="goPage('/pages/home/caseDetails')">
        <image class="img" src="" mode="aspectFill" />
        <view class="btm">
          <view class="tit">大声安利私藏好物</view>
          <view class="user">
            <view class="l">
              <u-avatar size="18"></u-avatar>
              用户昵称
            </view>
            <view class="zan">
              <image @click="likeFn(1)" v-if="'1' === '1'" class="heart" src="../../static/home/red_heart.png" mode="aspectFill" />
              <image @click="likeFn(1)" v-else class="heart" src="../../static/home/heat.png" mode="aspectFill" />
              <text> 845</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="spBox" v-if="tabActive === '服务'">
      <view style="width: 48%" v-for="(item, index) in 3" :key="index">
        <FwItem />
      </view>
    </view>
    <view class="listBox" v-if="tabActive === '商品'">
      <view style="width: 49%" v-for="(item, index) in 5">
        <GoodsItem />
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { goBack, goPage } from "@/utils/commonFn";
import { ref } from "vue";
import FwItem from "../home/components/FwItem.vue";
import GoodsItem from "../shop/components/GoodsItem.vue";
const list1 = ref([{ name: "动态" }, { name: "服务" }, { name: "商品" }]);
const tabActive = ref("动态");
const likeFn = async (item: any) => {
  if (item.likeFlag === "1") {
    item.likeFlag = "0";
    --item.likeCount;
  } else {
    item.likeFlag = "1";
    ++item.likeCount;
  }
};
const tabClick = (e: any) => {
  tabActive.value = e.name;
};
</script>
<style lang="less" scoped>
.con {
  background: #fff;
  .navbarBox {
    padding: 20rpx;
    margin-bottom: 0;
    .l {
      display: flex;
      align-items: center;
      .nickName {
        display: flex;
        align-items: center;
        font-size: 28rpx;
        color: #333333;
        .head {
          width: 64rpx;
          height: 64rpx;
          background: #d8d3d9;
          border-radius: 50%;
          margin-right: 8rpx;
        }
      }
    }
  }
}
.box {
  column-count: 2;
  margin-top: 20rpx;
}
.item {
  margin-bottom: 20rpx;
  background: #ffffff;
  border-radius: 0rpx 0rpx 16rpx 16rpx;
  .btm {
    padding: 18rpx;
  }
  .img {
    width: 100%;
    background: #d3afa2;
  }
  .tit {
    font-size: 28rpx;
    color: #000000;
  }
  .user {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 24rpx;
    .l {
      display: flex;
      align-items: center;
      font-size: 24rpx;
      color: #8a8a8d;
    }
  }
}
.zan {
  display: flex;
  align-items: center;
  font-size: 28rpx;
  color: #8a8a8d;
  .heart {
    width: 36rpx;
    height: 36rpx;
    margin-right: 6rpx;
  }
}
.spBox {
  background: #fff;
  margin-top: 20rpx;
  padding: 20rpx 32rpx;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.listBox {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  background-color: #f3f4f6;
  margin-top: 20rpx;
}
</style>
